import React from 'react';
import Loadable from 'react-loadable';
import "./tab.less"
import Loading from '../loading/loading'

const LoadableComponent1 = Loadable({
  loader: () => import ('./tabComponents1'),
  loading: Loading
});
// const LoadableComponent2 = Loadable({
//   loader: () => import ('./tabComponents2'),
//   loading: Loading
// });
class tab extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      index: 0
    };
    this.handleClick.bind(this);
  }
  componentDidMount() {
    //console.log("this.state", this.state)
  }
  componentWillMount() {}
  tabCompont() {
    return (
      <div>
        <span
          onClick={() => this.handleClick(0)}
          className={this.state.index == 0
          ? 'active'
          : ''}>111111</span>
        <span
          onClick={() => this.handleClick(1)}
          className={this.state.index == 1
          ? 'active'
          : ''}>2222222</span>
      </div>
    );
  }
  handleClick(index) {
    console.log("index", index)
    this.setState({index: index})
  }
  tabContentCompont() {
    return ""
    // this.state.index == 0
    //   ? <LoadableComponent1/>
    //   : <LoadableComponent1/>;
  }

  render() {

    return (
      <div>
        <h1>'Hello, world!'</h1>
        <div>
          {this.tabCompont()}
        </div>
        <div>
          {this.tabContentCompont()}
        </div>
      </div>
    );
  }
}
export default tab;
